// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal, List, Switch, Checkbox, WhiteSpace, Button, WingBlank, Modal } from '@ant-design/react-native';
const Item = List.Item;
const Brief = Item.Brief;
const CheckboxItem = Checkbox.CheckboxItem;

// 引入 处理数据 所需文件
import { orderDel, paymentOrder, paymentWay } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, countDown, WeChatPay, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class SelectPay extends Component {

  constructor(props) {
    super(props)
    this.state = {
      payEnd: '',
      payWay: [],
      payNo: null
    }
  }

  componentDidMount() {
    const { orderNo, payEndTime, totalMoney } = this.props
    if (payEndTime) {
      this.time = setInterval(() => {
        let payEnd = countDown(payEndTime)
        if (payEnd) {
          this.setState({
            payEnd
          })
        } else {
          Toast.info('订单超时', 1)
        }
      }, 1000)
    }
    paymentWay({}).then(res => {

      this.setState({
        payNo: res.data[0].payNo,
        payWay: res.data
      })
    })
  }

  handleOrderDelete() {
    const { orderNo, payEndTime } = this.props
    orderDel({ orderNo }).then(res => {
      Toast.success(res.message, 1)
      Actions.pop()
    })
  }

  isOrderDel() {
    Modal.alert('删除', '确认取消订单', [
      {
        text: '取消',
        onPress: () => { },
        style: 'cancel',
      },
      { text: '确定', onPress: () => this.handleOrderDelete() },
    ]);
  }

  handlePay() {
    const { orderNo, totalMoney } = this.props
    const { payNo } = this.state
    // Toast.info('暂未开通支付功能，目前只做演示', 1)
    paymentOrder({
      orderNo: orderNo,
      payNo,
    }).then(res => {
      console.log(res)
      WeChatPay(res.data.wechat).then(payRes => {
        console.log(payRes)
        // 需要返回支付金额，订单号，自己找支付方式
        Actions.paymentResult({
          // payTime: '今天',
          payAmount: totalMoney,
          payType: '微信支付',
          orderNo
        })
      }).catch(error => {
        Toast.info('支付失败', 1.2)
        console.log(error)
      })
    })

    // 1222
    // Actions.paymentResult({
    //   payTime: '今天',
    //   payAmount: '100.00',
    //   payType: '微信支付',
    //   orderNo
    // })
  }

  componentWillUnmount() {
    clearInterval(this.time)
  }

  render() {
    const { orderNo, payEndTime, totalMoney } = this.props
    const { payEnd, payWay, payNo } = this.state
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="支付"
          back={true}
        />
        <ScrollView style={Style.content}>
          <View style={{
            alignItems: 'center',
            justifyContent: 'center',
            paddingVertical: 30,
            backgroundColor: '#fff'
          }}>

            <Text style={{ fontSize: 26, color: '#000', lineHeight: 40, marginBottom: 10 }}>订单提交成功</Text>
            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginBottom: 10 }}>请在{payEnd}内完成支付</Text>
            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginBottom: 10 }}>支付金额 ¥{totalMoney}</Text>
          </View>
          <List renderHeader="支付方式">
            {payWay.map((item, index) => {
              return (
                <CheckboxItem
                  key={index}
                  checked={payNo}
                  onChange={() => {
                    this.setState({ payNo: item.payNo });
                  }}
                >{item.payName}</CheckboxItem>
              )
            })}
          </List>
          <WhiteSpace size="lg"></WhiteSpace>
          <WingBlank>
            <Button type="primary" onPress={() => { this.handlePay() }}>去支付</Button>
            <WhiteSpace></WhiteSpace>
            <Button onPress={() => { this.isOrderDel() }}>取消订单</Button>
          </WingBlank>
        </ScrollView>
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(SelectPay))
